<template>
    <section class="review-result">
        <div slot="header" style="font-size: 18px;font-weight: bold;text-align: left;margin-left: 10px">
            <span>年份：</span>
            <el-date-picker
                v-model="quotaYear"
                @change="showList"
                type="year"
                placeholder="请选择年份"
                value-format="yyyy">
            </el-date-picker>
            <el-button type="primary" v-if="user.roleCode === 'CITY_LEADER'" @click="downFileBox">导出</el-button>
        </div>
        <div v-loading="resultLoading" class="result-container" element-loading-text="考核结果加载中..."
             element-loading-background="rgba(255, 255, 255, 0.3)">
            <template v-if="!resultLoading">
                <template v-if="hasResult">
                    <el-row>
                        <div class="titleCard">
                            <el-image class="titleCardImg" src="static/review-result/checkResule.png"></el-image>
                        </div>
                    </el-row>
                    <el-col style="width: 600px;" v-if="user.roleCode !== 'CITY_LEADER'">
                      <el-card shadow="hover" style="height: 535px;">
                            <div slot="header">
                                <span class="header_title">全镇排名情况</span>
                                <!-- <el-button style="float: right; font-size: 14px;margin-right: 2px;color:#55BD94;margin-top: -3px" type="text" @click="showAll('全市排名情况',rankList['all'])">查看全部</el-button> -->
                            </div>
                            <div class="singleDiv title_bg">
                                <el-col :span="4">镇级组织</el-col>
                                <el-col :span="5">村级组织</el-col>
                                <el-col :span="4">村书记</el-col>
                                <el-col :span="3">镇级排名</el-col>
                                <el-col :span="4">市级排名</el-col>
                                <el-col :span="3">得分</el-col>
                            </div>
                            <div style="height: 440px;width: 100%;overflow-y: auto">
                              <div v-for="(item,index) in activeTownResult" :class="`singleDiv ${ index%2===1 ? 'tab_bg' : ''} ${item.hasNew ? 'has_new' : ''}`">
                                <el-col :span="4">{{item.parentDistrictName.replace(/党委/,'')}}</el-col>
                                <el-col :span="5">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                                <el-col :span="4">{{item.cadresName}}</el-col>
                                <el-col :span="3" class="score">{{index + 1}}</el-col>
                                <el-col :span="4" class="score">{{item.ranking}}</el-col>
                                <el-col :span="3" class="score">{{item.score}}</el-col>
                            </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col style="width: 600px;" v-if="user.roleCode !== 'CITY_LEADER'">
                      <el-card shadow="hover" style="height: 535px">
                            <div slot="header">
                                <span class="header_title">全市排名前10名</span>
                                <!-- <el-button style="float: right; font-size: 14px;margin-right: 2px;color:#55BD94;margin-top: -3px" type="text" @click="showAll('全市排名情况',rankList['all'])">查看全部</el-button> -->
                            </div>
                            <div class="singleDiv title_bg">
                                <el-col :span="6" :offset="1">镇级组织</el-col>
                                <el-col :span="6">村级组织</el-col>
                                <el-col :span="5">村书记</el-col>
                                <el-col :span="5">得分</el-col>
                            </div>
                            <div v-for="(item,index) in rankList['all']"
                                 :class="`singleDiv ${ index%2===1 ? 'tab_bg' : ''} ${item.hasNew ? 'has_new' : ''}`"
                                 v-if="index<10"
                            >
                                <el-col :span="6" :offset="1">{{item.parentDistrictName.replace(/党委/,'')}}</el-col>
                                <el-col :span="6">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                                <el-col :span="5">{{item.cadresName}}</el-col>
                                <el-col :span="5" class="score">{{item.score}}</el-col>
                            </div>
                        </el-card>
                    </el-col>
                    <div class="flex-row">
                        <el-card shadow="hover" v-if="user.roleCode === 'CITY_LEADER'">
                            <div slot="header">
                                <span class="header_title">全市排名前10名</span>
                                <el-button style="float: right; font-size: 14px;margin-right: 2px;color:#55BD94;margin-top: -3px" type="text" @click="showAll('全市排名情况',rankList['all'])">查看全部</el-button>
                            </div>
                            <div class="singleDiv title_bg">
                                <el-col :span="6" :offset="1">镇级组织</el-col>
                                <el-col :span="6">村级组织</el-col>
                                <el-col :span="5">村书记</el-col>
                                <el-col :span="5">得分</el-col>
                            </div>
                            <div v-for="(item,index) in rankList['all']"
                                 :class="`singleDiv ${ index%2===1 ? 'tab_bg' : ''} ${item.hasNew ? 'has_new' : ''}`"
                                 v-if="index<10"
                            >
                                <el-col :span="6" :offset="1">{{item.parentDistrictName.replace(/党委/,'')}}</el-col>
                                <el-col :span="6">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                                <el-col :span="5">{{item.cadresName}}</el-col>
                                <el-col :span="5" class="score">{{item.score}}分</el-col>
                            </div>
                        </el-card>
                        <el-card shadow="hover" v-if="user.roleCode === 'CITY_LEADER'">
                            <div slot="header"><span class="header_title">全市排名后10名</span></div>
                            <div class="singleDiv title_bg">
                                <el-col :span="6" :offset="1">镇级组织</el-col>
                                <el-col :span="6">村级组织</el-col>
                                <el-col :span="5">村书记</el-col>
                                <el-col :span="5">得分</el-col>
                            </div>
                            <div v-for="(item,index) in rankList['last10']"
                                  :class="`singleDiv ${ index%2===1 ? 'tab_bg' : ''} ${item.hasNew ? 'has_new' : ''}`"
                            >
                                <el-col :span="6" :offset="1">{{item.parentDistrictName.replace(/党委/,'')}}</el-col>
                                <el-col :span="6">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                                <el-col :span="5">{{item.cadresName}}</el-col>
                                <el-col :span="5" class="score">{{item.score}}分</el-col>
                            </div>
                        </el-card>
                        <el-card shadow="hover" v-if="user.roleCode === 'CITY_LEADER'">
                            <div slot="header">
                                <span class="header_title">各镇考核排名</span>
                                <el-button style="float: right; font-size: 14px;margin-right: 1px;color:#55BD94;margin-left: 10px;margin-top: -3px" type="text" @click="showAll('各镇考核排名情况',townResult)">查看全部
                                </el-button>
                                <el-select v-model="currentTown" style="float: right" @change="handleTownChange">
                                    <el-option v-for="item in townList" :value="item.districtId" :label="item.districtName" :key="item.districtId"></el-option>
                                </el-select>
                            </div>
                            <div class="singleDiv title_bg">
                                <el-col :span="7" :offset="1">村级组织</el-col>
                                <el-col :span="7">村书记</el-col>
                                <el-col :span="7">得分</el-col>
                            </div>
                            <div v-for="(item,index) in townResult"
                                 :class="`singleDiv ${ index%2===1 ? 'tab_bg' : ''} ${item.hasNew ? 'has_new' : ''}`"
                                 v-if="index<10">
                                <el-col :span="7" :offset="1">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                                <el-col :span="7">{{item.cadresName}}</el-col>
                                <el-col :span="7" class="score">{{item.score}}分</el-col>
                            </div>

                        </el-card>
                        <el-card shadow="hover" v-if="user.roleCode === 'CITY_LEADER'">
                            <div slot="header">
                                <span class="header_title">各项指标排名前三名单</span>
                            </div>
                            <div class="town_dialog_scroll">
                                <div v-if="rankList['top3ByQuotas']">
                                    <div v-for="item in Object.keys(rankList['top3ByQuotas'])" style="line-height: 30px">
                                        <el-col :span="12">
                                            <div class="singleDiv1 title_bg">
                                                {{item}}
                                            </div>
                                            <div v-for="(sub,index) in rankList['top3ByQuotas'][item]" :class="`singleDiv1 ${ index%2===1 ? 'tab_bg1' : ''} ${sub.hasNew ? 'has_new' : ''}`">
                                                {{sub.parentDistrictName.replace(/党委/,'')}}&nbsp;
                                                {{sub.districtName.replace(/支部|党总支/,'')}}&nbsp;
                                                {{sub.cadresName}}
                                            </div>
                                        </el-col>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <el-row v-if="user.roleCode === 'CITY_LEADER'">
                        <div class="titleCard">
                            <div class="titleCard">
                                <el-image class="titleCardImg" src="static/review-result/leaveAdvice.png"></el-image>
                            </div>
                        </div>
                    </el-row>
                    <div class="flex-row advice" v-if="user.roleCode === 'CITY_LEADER'">
                        <el-card shadow="hover">
                            <div slot="header">
                                <span class="header_title">优秀村书记建议名单</span>
                                <el-button style="float: right; font-size: 14px;margin-right:2px;color:#fff;margin-top: -3px"
                                           type="text"
                                           @click="checkAll(rankList['good'],'优秀村书记建议名单', 'elementary')">查看全部
                                </el-button>
                                <el-tooltip style="cursor: pointer;" effect="light" content="当前年度全市考核分数排名前24名" placement="top-start">
                                  <i class="el-icon-question icon_description"></i>
                                </el-tooltip>
                            </div>
                            <el-col :span='12'
                                    v-for="(item,index) in rankList['good']" v-if="index<24"
                                    :class="(index%2===0)?'excellence_advice_one':'excellence_advice_two'"
                            >
                                <div :class="`${(index%4===0||index%4===1)?'excellence_advice_four':'excellence_advice_three'} ${item.hasNew ? 'has_new' : 'aaa'}`">
                                    {{item.districtName.replace(/支部|党总支/,'')}}: {{item.cadresName}}
                                </div>
                            </el-col>
                        </el-card>
                        <el-card shadow="hover">
                            <div slot="header">
                                <span class="header_title">称职村书记建议名单</span>
                                <el-button style="float: right; font-size: 14px;margin-right: 10px;color:#fff;margin-top: -3px"
                                           type="text"
                                           @click="checkAll(rankList['competent'],'称职村书记建议名单',  'competent')">查看全部
                                </el-button>
                                <el-tooltip style="cursor: pointer;" effect="light" content="当前年度全市考核分数排名第25-106名" placement="top-start">
                                  <i class="el-icon-question icon_description"></i>
                                </el-tooltip>
                            </div>
                            <el-col :span="12"
                                    v-for="(item,index) in rankList['competent']" v-if="index<24"
                                    :class="(index%2===0)?'excellence_advice_one':'excellence_advice_two'"
                            >
                                <div :class="`${(index%4===0||index%4===1)?'excellence_advice_four':'excellence_advice_three'} ${item.hasNew ? 'has_new' : 'aaa'}`">
                                    {{item.districtName.replace(/支部|党总支/,'')}}: {{item.cadresName}}
                                </div>
                            </el-col>
                        </el-card>
                        <el-card shadow="hover">
                            <div slot="header">
                                <span class="header_title">基本称职村书记建议名单</span>
                                <el-button style="float: right; font-size: 14px;margin-right: 10px;color:#fff;margin-top: -3px"
                                           type="text"
                                           @click="checkAll(rankList['basicCompetent'],'基本称职村书记建议名单', 'elementary')">查看全部
                                </el-button>
                                <el-tooltip style="cursor: pointer;" effect="light" content="当前年度全市考核分数排名去前106名" placement="top-start">
                                  <i class="el-icon-question icon_description"></i>
                                </el-tooltip>
                            </div>
                            <el-col :span="12"
                                    v-for="(item,index) in rankList['basicCompetent']" v-if="index<24"
                                    :class="(index%2===0)?'excellence_advice_one':'excellence_advice_two'"
                            >
                                <div :class="`${(index%4===0||index%4===1)?'excellence_advice_four':'excellence_advice_three'} ${item.hasNew ? 'has_new' : 'aaa'}`">
                                    {{item.districtName.replace(/支部|党总支/,'')}}: {{item.cadresName}}
                                </div>
                            </el-col>
                        </el-card>
                        <el-card shadow="hover">
                            <div slot="header">
                                <span class="header_title">不称职村书记建议名单</span>
                                <el-button style="float: right; font-size: 14px;margin-right: 10px;color:#fff;margin-top: -3px"
                                           type="text"
                                           @click="checkAll(rankList['incompetence'],'不称职村书记建议名单',  '')">查看全部
                                </el-button>
                            </div>
                            <el-col :span="12"
                                    class="bot"
                                    v-for="(item,index) in rankList['incompetence']" v-if="index<24"
                                    :class="(index%2===0)?'excellence_advice_one':'excellence_advice_two'"
                            >
                                <div :class="`${(index%4===0||index%4===1)?'excellence_advice_four':'excellence_advice_three'} ${item.hasNew ? 'has_new' : 'aaa'}`">
                                    {{item.districtName.replace(/支部|党总支/,'')}}: {{item.cadresName}}
                                </div>
                            </el-col>
                        </el-card>
                    </div>
                    <el-row v-if="user.roleCode === 'CITY_LEADER'">
                        <el-col>
                            <div class="titleCard">
                                <el-image class="titleCardImg" src="static/review-result/resultAdvice.png"></el-image>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row v-if="user.roleCode === 'CITY_LEADER'">
                        <Suggestion :hasResult="hasResult" :taskYear="quotaYear"
                                    :chat="rankList['lastGroupByTown']" :good10="rankList['good10']"></Suggestion>
                    </el-row>
                </template>
                <template v-else>
                    <img src="../../static/village/no-data.png" alt="" style="margin: 150px 0"/>
                </template>
            </template>
        </div>
        <el-dialog v-if="dialog"
                   :title="dialogTitle"
                   :visible.sync="dialog"
                   width="650px"
                   :modal-append-to-body='false'
                   :append-to-body="true">
            <div class="dialog_scroll">
                <el-col :span='12'
                        v-for="(item,index) in dialogList"
                        :class="`${(index%2===0)?'excellence_advice_one':'excellence_advice_two'}`"
                        style="text-align: center"
                >
                    <div :class="(index%4===0||index%4===1)?'excellence_advice_four':'excellence_advice_three'">
                        {{item.districtName.replace(/支部|党总支/,'')}}: {{item.cadresName}}
                    </div>
                </el-col>
            </div>
            <div slot="footer"
                 class="dialog-footer footer-position">
                <el-button @click="dialog=false">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog v-if="townRankDia"
           :title="diaTitle"
           :visible.sync="townRankDia"
           width="650px"
           :modal-append-to-body='false'
           :append-to-body="true">
            <div class="dialog_scroll" ref="print">
                <div v-for="(item,index) in diaList"
                     :class="`dialog_div  ${item.hasNew ? 'has_new' : ''}`">
                    <el-col :span="5">第{{index+1}}名</el-col>
                    <el-col :span="6">{{item.cadresName}}</el-col>
                    <el-col :span="4">{{item.parentDistrictName.replace(/党委/,'')}}</el-col>
                    <el-col :span="5">{{item.districtName.replace(/支部|党总支/,'')}}</el-col>
                    <el-col :span="4">{{item.score}}分</el-col>
                </div>
            </div>
            <div slot="footer"
                 class="dialog-footer footer-position">
                <el-button v-if="diaTitle == '各镇考核排名情况'&&user.roleCode === 'CITY_LEADER'" type="primary" @click="printJson(diaList)">打印</el-button>
                <el-button @click="townRankDia=false">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog
           :title="quotaYear+'年度考核情况统计表'"
           :visible.sync="downFileVis"
           width="95%"
           :modal-append-to-body='false'
           :append-to-body="true">
            <div v-loading="downFileLoading">
              <div class="table_box" v-if="tableData.length > 1">
                <div class="table_Head">
                  <div class="table_line" v-for="(item, index) in tableData" :key="index" v-if="index == 0">
                    <div class="table_col" v-for="(subItem, subIndex) in item" :key="subIndex">
                      {{subItem}}
                    </div>
                  </div>
                </div>
                <div class="table_body dialog_scroll">
                  <div class="table_line" v-for="(item, index) in tableData" :key="index" v-if="index > 0">
                    <div class="table_col" v-for="(subItem, subIndex) in item" :key="subIndex">
                      {{subItem ? subItem.replace(/支部|党总支|党委/,'') : subItem}}
                    </div>
                  </div>
                </div>
                <!-- <div class="table_body">
                  <div v-for="(item, index) in tableData" :key="item" v-if="index > 1">

                  </div>
                </div> -->
              </div>
              <div style="height: 300px;line-height: 300px;text-align: center;font-size: 18px" v-else>
                该年度暂无考核结果！
              </div>
            </div>
            <div v-if="tableData.length > 1" slot="footer"
                 class="dialog-footer footer-position">
                <el-button  type="primary" :loading="downFileLoading" @click="downFileHandle">确定导出</el-button>
                <el-button @click="downFileVis=false">关闭</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import Suggestion from "./Suggestion";
    import printJS from 'print-js'
    export default {
        name: "ReviewResult",
        data() {
            return {
                lastTenList: [],
                allRankList: [],
                fineList: [],
                competentList: [],
                basicCompetentList: [],
                inCompetentList: [],
                allRankDia: false,
                townRankDia: false,
                excellent: false,
                dialog: false,
                dialogTitle: "",
                dialogList: [],
                townList: [],
                townId: '',
                rankList: {},
                allRankLoading: true,
                allRankVis: false,
                dilogClassName: '',
                townResult: [],
                diaList:[],
                diaTitle:[],
                quotaYear:'',
                hasResult: false,
                resultLoading: false,
                currentTown: '',
                user: {},
                downFileVis: false,
                downFileLoading: false,
                tableData: [],
                tableDataHead: [],
                tableDataBody: [],
                downFileLoading: false,
                activeTownResult: []
            }
        },
        components: {
            Suggestion
        },
        methods: {
            checkAll(itemList, title, className) {
                this.dialogList = [];
                this.dialog = true;
                this.dialogList = itemList;
                this.dialogTitle = title;
                this.dialogClassName = className;
            },
            showList() {
                if (!this.quotaYear) {
                    return;
                };
                this.hasResult = false;
                this.resultLoading = true;

                this.$nextTick(_ => {
                    let path = `/identity/kPIVillageStatistics/getStatistics?taskYear=${this.quotaYear}`;
                    this.$http('GET', path, false).then(data => {
                        if (data && data !== 'null') {
                            this.rankList = data;
                            this.hasResult = true;
                            this.handleTownChange(this.townList[0].districtId);
                        } else {
                            this.doLoadingClose();
                        }
                    }).catch(_=> this.doLoadingClose())
                });
            },
            changeNameShow(nameList) {
                nameList.forEach(item => {
                    if (item.cadresName.length < 3) {
                        item.cadresName = item.cadresName.slice(0, 1) + '\xa0\xa0\xa0' + item.cadresName.slice(1);
                    }
                });
            },
            showAllRank() {
                this.allRankDia = true;
                this.$nextTick(_ => {
                    setTimeout( () => {
                        this.allRankVis = true;
                        this.allRankLoading = false;
                    }, 1000);
                })
            },
            async handleTownChange(val) {
                let param = {parentDistrictId: val, quotaLevel: "0", quotaYear: this.quotaYear};
                let res = await this.$http("POST", '/identity/kPIVillageStatistics/list?sort=ranking,asc', param, false);
                this.townResult = res;
                this.doLoadingClose();
            },
            async loadTownChange() {
                let param = {parentDistrictId: this.user.districtId, quotaLevel: "0", quotaYear: this.quotaYear};
                let res = await this.$http("POST", '/identity/kPIVillageStatistics/list?sort=ranking,asc', param, false);
                this.activeTownResult = res;
                this.doLoadingClose();
            },
            showAll(title,arr){
                this.diaTitle = title ;
                this.diaList = arr ;
                this.townRankDia = true;
            },
            doLoadingClose() {
                setTimeout(_ => this.resultLoading = false, 500);
            },
            downFileBox(){
              this.downFileVis = true
              this.downFileLoading = true
              this.$http('get',`/identity/kPIVillageQuota/getAll/${this.quotaYear}`,false).then(res => {
                console.log(res,'--------------');
                let arr = []
                res.map(item => {
                    if(item[0].indexOf('广电')  == -1) {
                        arr.push(item)
                    }
                })
                this.tableData= arr
                // this.tableDataHead = this.tableData[0]
                this.downFileLoading = false
              })
            },
            downFileHandle(){
              this.downFileLoading = true
              this.$http('get',`identity/kPIVillageQuota/exportAll/${this.quotaYear}`,false).then( content =>{
                     window.open(content.url);
                     this.downFileLoading = false
                });
            },
            async printJson(diaList) {
              //通过getdata调用后台接口获取数据封装到res
              const res = diaList
              this.list = res || [];
              let data = []
              for (let i=0; i < this.list.length; i++) {
                  data.push({
                  field1: i + 1,
                  field2: this.list[i].cadresName,
                  field3: this.list[i].parentDistrictName,
                  field4: this.list[i].districtName,
                  field5: this.list[i].score,
                  field6: this.list[i].ranking,
                  field7: this.list[i].partitionLevel,
                })
              }
              printJS({
                printable: data,
                properties: [
                  {
                    field: 'field1',
                    displayName: '全镇排名',
                    columnSize: 1
                  },
                  {
                    field: 'field2',
                    displayName: '村书记',
                    columnSize: 1
                  },
                  {
                    field: 'field3',
                    displayName: '镇级组织',
                    columnSize: 1
                  },
                  {
                    field: 'field4',
                    displayName: '村级组织',
                    columnSize: 1
                  },
                  {
                    field: 'field5',
                    displayName: '得分',
                    columnSize: 1
                  },
                  {
                    field: 'field6',
                    displayName: '全市排名',
                    columnSize: 1
                  },
                  {
                    field: 'field7',
                    displayName: '考核等次',
                    columnSize: 1
                  }
                ],
                type: 'json',
                header: this.list[0].parentDistrictName + '考核情况',
                headerStyle: 'text-align: center;font-size: 20px',
                // 样式设置
                gridStyle: 'border: 1px solid #000;text-align: center;padding: 5px 3px;',
                gridHeaderStyle: 'font-weight: 700;border: 1px solid #000;padding: 7px 3px;'
              })
            },
        },
        mounted() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            this.townList = JSON.parse(sessionStorage.getItem("towns"));
            // this.quotaYear = new Date().getFullYear().toString();
            this.currentTown = this.townList[0].districtId;
            this.quotaYear = '2020';
            this.$nextTick(_ => this.showList());
            this.$nextTick(_ => this.loadTownChange());
        }
    }
</script>

<style scoped lang="less">
    .review-result {
        width: 100%;
        min-height: 700px;
        font-family:Source Han Sans CN!important;
    }
    .table_box {
      width: 100%;
      // height: 30px;
      // .table_title {
      //   // height: 20px;
      //   display: flex;
      //   div {
      //     flex: 1;
      //   }
      // }
      // .table_content {
      //   border: 1px solid #ccc;
      //   width: 100%;
        .table_line {
          width: 100%;
          display: flex;
          border-bottom: 1px solid #ebeef5;
          .table_col {
            flex: 1;
            text-align: center;
            border-left: 1px solid #ebeef5;
            padding: 5px 5px;
          }
          .table_col:last-child {
              border-right: 1px solid #ebeef5;
            }
        }
        .table_Head {
          // height: 107px;
          // overflow-y: auto;
          .table_line {
            padding-right: 5px;
            border-top: 1px solid #ebeef5;
            // .table_col:last-child {
            //   border-right: 1px solid #ccc;
            // }
            
          }
        }
        .table_body {
          .table_line:hover {
            background-color: #f5f7fa;
          }
        }
      // }
    }
    .review-result .singleDiv {
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        background-color: #fff;
    }
    .review-result .singleDiv1 {
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        background-color: #fff;
        border-right: 1px solid #DCEEE8;
        color: #393939;
        font-weight: 400;
    }
    .score{
        color:#CC0000!important;
    }
    .title_bg{
        background-color:#73D1B2!important;
        border:1px solid rgba(94, 199, 158, 0.1)!important;
        box-shadow:0px 1px 4px 0px rgba(50,140,104,0.06)!important;
        font-size: 14px!important;
        font-weight:600!important;
        color:#fff!important;
        height: 40px!important;
        line-height: 40px!important;
        border-right:1px solid #DCEEE8 ;
    }

    .dialog_div {
        line-height: 40px;
        font-size: 16px;
        border: #ddf1e8 1px solid;
        background-color: #f6f9f8!important;
        box-shadow: 2px 2px 10px #ddf1e8;
        height: 40px;
        margin-bottom: 10px;
        text-align: center;
    }

    .review-result .el-card {
        margin: 8px 10px;
    }
    .review-result .leave_advice {
        margin-bottom: 30px;
    }
    .review-result .leave_advice .el-card {
        /*min-height: 650px;*/
    }

    .review-result .diaDiv {
        float: left;
        width: 300px;
        height: 50px;
        line-height: 50px;
        border: #ddf1e8 1px solid;
        background: #f6f9f8;
        -moz-box-shadow: 2px 2px 10px #ddf1e8;
        -webkit-box-shadow: 2px 2px 10px #ddf1e8;
        box-shadow: 2px 2px 10px #ddf1e8;
    }

    .review-result .lastIcon {
        width: 25px;
        height: 25px;
        line-height: 25px;
        margin-left: 15px;
        font-size: 14px;
        border-radius: 15px;
        background-color: #d87f73;
        border: none;
        font-weight: bold;
        color: #122747;
    }

    .review-result .img {
        width: 35px;
        height: 35px;
        margin: 5px;
        background-size: 33px 35px;
    }

    .review-result .img1 {
        width: 24.5px;
        height: 30.8px;
        margin: 8px;
        background-size: 100% 100%;
    }

    .review-result .img2 {
        width: 28px;
        height: 26.6px;
        margin: 10px;
        background-size: 100% 100%;
    }

    .review-result .img3 {
        width: 43.4px;
        height: 33.6px;
        background-size: 100% 100%;
        margin: 5px;
    }

    .review-result .img4 {
        width: 40.8px;
        height: 31.2px;

        background-size: 100% 100%;
        margin: 5px;
        margin-top: 8px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
    }

    .bot {
        position: relative;
        margin: 10px 0;
    }

    .bot_img {
        position: absolute;
        top: -22px;
        width: 33px;
        height: 39px;
        margin: 15px;
        margin-left: 40px;
        background-size: 100% 100%;

    }

    .bot_img1 {
        position: absolute;
        width: 33px;
        height: 39px;
        margin: 0 auto;
        background-size: 100% 100%;
        top: -8px;
        left: 35px;
    }

    .rank1 {
        font-size: 14px;
        padding-left: 20px;
        text-align: center;
    }

    .incompetent {
        background-image: url("../../static/img/ReviewResult/incompetent.png");
    }

    .competent {
        background-image: url("../../static/img/ReviewResult/competent.png");
    }

    .reciprocal {
        background: url("../../static/img/ReviewResult/reciprocal.png") no-repeat;
    }

    .elementary {
        background-image: url("../../static/img/ReviewResult/elementary.png");
    }

    .before {
        background: url("../../static/img/ReviewResult/before.png") no-repeat;
    }

    .city {
        background: url("../../static/img/ReviewResult/city.png") no-repeat;
    }

    .excellence {
        background-image: url("../../static/img/ReviewResult/excellence.png");
    }

    .town {
        background: url("../../static/img/ReviewResult/town.png") no-repeat;
    }

    .reciprocal .rank {
        line-height: 60px;
        height: 60px;
        font-size: 14px;
    }

    .bot .rank {
        padding-left: 0px;
    }
    .rank_btn{
        display: inline-block;
        border: 1px solid #55BD94;
        border-radius: 3px;
        font-size: 15px;
        font-weight: 600;
        height: 35px;
        line-height: 35px;
    }
    .rank_cun{
        width:90px;
        display: inline-block;
    }
    .rank_sj{
        width: 70px;
        display: inline-block;
        background-color: #2EAC69;
        color: #fff;
        height: 34px;
    }


    .all_city {
        width: 450px;
        display: inline-block;
    }
    .tab_bg {
        height: 44px!important;
        line-height: 44px!important;
        background:rgba(234,243,240,1)!important;
        border:1px solid rgba(94, 199, 158, 0.1)!important;
    }
    .tab_bg1 {
        height: 44px!important;
        line-height: 44px!important;
        background:rgba(234,243,240,1)!important;
        border:1px solid rgba(94, 199, 158, 0.1)!important;
        border-right: 1px solid #DCEEE8!important;
    }
    .titleCard {
        background:linear-gradient(90deg,rgba(100,169,179,1),rgba(69,160,78,1));
        border-radius:4px;
        height: 55px;
        text-align: left;
        line-height: 55px;
        margin: 10px;
        margin-top: 30px;
    }
    .titleCardImg{
        width: 200px;
        height: 30px;
        margin-top: 12.5px;
        margin-left: 20px
    }
    .header_title{
        border-left: 3px solid #55BD94;
        padding-left: 5px
    }
    .advice .header_title{
        border-left: 3px solid #fff;
        padding-left: 5px
    }
    .icon_description {
      margin-left: 10px;
      font-size: 14px;
    }
    .has_new {
      background-image: url('../../static/review-result/new_secretary.png');
      background-repeat: no-repeat;
    }
</style>
<style>
    .review-result .el-card__body {
        padding: 0px 0px;
    }

    .review-result .el-card__header {
        padding: 13px 19px;
        text-align: left;
        font-weight: bold;
        font-size: 16px;
    }
    .advice .el-card__header {
        padding: 13px 19px;
        text-align: left;
        font-weight: bold;
        font-size: 16px;
        background-color: #0A9B1A;
        color: #fff;
    }

    .review-result .el-select {
        width: 140px !important;
    }

    .review-result .el-input--mini .el-input__inner {
        width: 140px !important;
    }
    .review-result .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 140px !important;
    }

    .review-result .el-card {
        background:rgba(255,255,255,1);
        border:1px solid rgba(224, 240, 233, 1);
        box-shadow:0px 3px 6px 0px rgba(50,140,104,0.24);
        color:#333333;
        font-weight: 600!important;
    }
    .review-result .el-image{
        margin-bottom: 10px;
    }
    .all-rank-dialog .el-dialog__body{
        overflow: auto;
        text-align: center;
        height: 600px;
    }
    .dialog_scroll {
        height: 620px;
        overflow: auto
    }
    .town_dialog_scroll {
        max-height: 480px;
        overflow: auto;
    }
    .all-rank-dialog .el-dialog__body::-webkit-scrollbar-thumb,
    .town_dialog_scroll::-webkit-scrollbar-thumb,
    .dialog_scroll::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
    .review-result > .el-loading-mask > .el-loading-spinner {
        top: 300px;
    }
    .review-result .flex-row {
        display: flex;
        flex-direction: row;
    }
    .review-result .flex-row .el-card{
        flex: 1;
    }
    .result-container {
        width: 100%;
        min-height: 700px;
    }
</style>
<style scoped>
   .excellence_advice_one{
       font-size:14px;
       font-family:Microsoft YaHei UI;
       font-weight:400;
       color:rgba(57,57,57,1);
       border-right: 1px solid #DCEEE8;
       height: 44px;
       line-height: 44px;
       text-align: left;
       text-indent: 20px;
   }
   .excellence_advice_two{
       font-size:14px;
       font-family:Microsoft YaHei UI;
       font-weight:400;
       color:rgba(57,57,57,1);
       height: 44px;
       line-height: 44px;
       text-align: left;
       text-indent: 20px;
   }
   .excellence_advice_three{
       background:rgba(255,255,255,1);
       box-shadow:0px 1px 0px 0px rgba(220,238,232,1);
   }
   .excellence_advice_four{
       background-color:rgba(234,243,240,1);
       box-shadow:0px 1px 0px 0px rgba(220,238,232,1);
   }
</style>
